import cx from 'classnames';
import React from 'react';
import styles from './index.less';
interface ViewProps extends React.HTMLAttributes<HTMLSpanElement> {
  active?: boolean;
}
export default class LoadingDna extends React.Component<ViewProps> {
  public render() {
    const { active, className, children, ...restProps } = this.props;

    return (
      <div className={cx(styles.box, className)} {...restProps}>
        <div className={styles.inner}>
          {new Array(2).fill(1).map((gp, gpId) => (
            <div
              className={cx(styles.group, styles['group' + gpId])}
              key={gpId + 'group'}
            >
              {new Array(2).fill(1).map((item, index) => (
                <div
                  className={cx(styles.row, styles['row' + index])}
                  key={index + 'row'}
                >
                  {new Array(13).fill(1).map((it, ind) => (
                    <span
                      className={cx(styles.dot, styles['dot' + ind])}
                      key={ind + 'dot'}
                    >
                      <span className={styles.dotIn} key={ind + 'dotIn'}>
                        <span
                          className={styles.dotColor}
                          key={ind + 'dotColor'}
                        ></span>
                      </span>
                    </span>
                  ))}
                </div>
              ))}
            </div>
          ))}
        </div>
        <div className={styles.background}></div>
      </div>
    );
  }
}
